

<template>
    <div class="user-center">
        <div class="user-info">
            <div class="personal-img">
            <img src="../assets/images/user_bg.jpg"/>
            </div>
            <div class="user-img">
                <img :src="attchAvatar(avatar)">
                <span>{{ username }}</span>
            </div>
        </div>

        <div class="user-operation">
            <div class="oper-sort">
                <ul>
                    <li v-for="item in iconList" @click="gotoPage(item.url)" >
                        <gIcon :icon="item.icon"></gIcon>
                        <span>{{ item.title }}</span>
                        <br>
                        <span>______</span>
                    </li>
                </ul>
            </div>            
            <div class="oper-content">
                <RouterView/>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance } from 'vue';
import { userInfo } from '../stores/user'
import { icons } from '../assets/icons/icon'
import gIcon from '../components/gIcon.vue'
import { RouterView } from 'vue-router'
import { HttpRequest } from '@/request/request';
import { title } from 'process';

export default defineComponent({
    components:{
        gIcon
    },
    setup(){
        const proxy = getCurrentInstance()?.proxy;
        const avatar = userInfo().avatar == "" ? "src/assets/images/user_ava.png" : computed(()=>userInfo().avatar);
        const username = computed(()=>userInfo().name);
        const iconList = [
            {icon:icons.home,title:"回到首页",url:"/"},
            {icon:icons.user,title:"用户信息",url:"/usercenter"},
            {icon:icons.upload,title:"上传游戏",url:"/usercenter/gameUpload"},
            {icon:icons.list,title:"管理游戏",url:"/usercenter/gameManage"},
            
        ];

        function gotoPage(url:string){
            proxy?.$router.push(url);
        }
        return {
            avatar,
            username,
            iconList,
            gotoPage,
            attchAvatar:HttpRequest.attchAvatar
        }
    }
})
</script>

<style scoped>
.user-center{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    background-color: rgba(254, 251, 251, 0.578);
    height: 100%;
    overflow: auto;
}
.user-info{
    width: 70%;
    border: 0.5px solid #ccc;
    box-shadow: 0 0 5px 1px rgba(94, 93, 93, 0.5);
    border-radius: 1%;
    .personal-img{
        width: 100%;
        height: 0;
        padding-bottom: 30%;
        position: relative;  
        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
    }

    .user-img{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 10px;
        height: fit-content;
        img{
            margin-left: 20px;
            width: 80px;
            height: 80px;
            object-fit: fill;
        }
        span{
            margin-left: 20px;
            font-size: 24px;
            font-weight: 550;
        }
    }
}

.user-operation{
    width: 70%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .oper-sort{
        width: 5%;
        height: fit-content;
        box-shadow: 0 0 4px 1px rgba(94, 93, 93, 0.5);
        border-radius: 5%;
        padding: 15px 20px;
        ul{
            display: block;
            justify-content: space-between;
            li{
                color: rgba(43, 42, 42, 0.5);
                display: block;
                flex-direction: column;
                align-items: center;
                cursor: pointer;
                span{
                    color: black;
                    font-size: 10px;
                    font-weight: 550;
                }
            }
            li:hover{
                color: #1296db;;
            }
        }
    }

    .oper-content{
        width: 88%;
    }
}
</style>